<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" title="工伤事故申报个人信息"
		:isBack="true" backText="返回"></cu-custom>
		<view>
			<view style="display:flex">
				<view class="personType personTypeLabel" style="width: 320rpx;">申请人</view>
					<checkbox-group @change="checkboxChange" class="personType personTypeCheckbox" style="display:flex">
						<view v-for="personType in personTypes" class="personType" style="width: 190rpx;">
							<checkbox :checked="personType.checked"
							style="transform: scale(0.5)" :value="personType.value"></checkbox>
							<label :for="personType.value" style="width: 122rpx;">{{personType.name}}</label>
						</view>
					</checkbox-group>
			</view>
			<zh-input v-model="personInfo.aac003" type="text" label="姓名" 
			labelAlign="left" inputAlign="right" :required="true"></zh-input>
			<zh-input v-model="personInfo.aac002" type="text" label="身份证"
			labelAlign="left" inputAlign="right" :required="true"></zh-input>
			<zh-picker
				pickerRef="sex"
				label="性别"
				labelAlign="left"
				justifyContent="space-between"
				mode="selector"
				:options="sexData"
				rightIconClass="text-gray"
				:value="personInfo.aac004"
				placeholder="请选择性别"
				themeColor="#FC7983"
				@pickerChange="onSexChange($event)"
				ref="sex"
			></zh-picker>
			<zh-input v-model="personInfo.aac067" type="text" label="联系电话"
			labelAlign="left" inputAlign="right" :required="true"></zh-input>
			<zh-input v-model="personInfo.eac178" type="text" label="家庭地址"
			labelAlign="left" inputAlign="right" ></zh-input>
			<zh-input v-model="personInfo.employer" type="text" label="工作单位"
			labelAlign="left" inputAlign="right" ></zh-input>
			<zh-input v-model="personInfo.workAddress" type="text" label="单位地址"
			labelAlign="left" inputAlign="right" ></zh-input>
			<zh-input v-model="personInfo.post" type="text" label="岗位"
			labelAlign="left" inputAlign="right" ></zh-input>
			<view class="flex flex-direction" style="padding-top: 10rpx;">
				<button class="cu-btn shadow margin-tb-sm lg bg-gradual-blue-light" @tap="next">下一步</button>
			</view>
		</view>
		<u-modal v-model="modelShow"  :content="modelContent" :confirm-color="userType=='20'?'#0081ff':'#f37b1d'"></u-modal>
	</view>
</template>

<script>
	import store from "@/store";
	export default {
		data() {
			return {
				modelShow:false,
				modelContent:'',
				sexData: [{ dictKey: '1', dictValue: '男' },
						  { dictKey: '2', dictValue: '女' }],
				personTypes:[
					{
						name:'职工本人',
						value:'myself'
					},
					{
						name:'用人单位',
						value:'employer'
					},
					{
						name:'近亲属',
						value:'relatives'
					}
				],
				personInfo:{
					aac003:'',
					aac004:'',
					aac002:'',
					aac067:''
				},
				personInfoRequired:['aac003','aac004','aac002','aac067']
			}
		},
		methods: {
			onSexChange(e){
				this.personInfo.aac004 = e.value;
			},
			checkboxChange: function(e) {
			    var personTypes = this.personTypes;
				var values = e.detail.value;
				for (var i = 0, lenI = personTypes.length; i < lenI; ++i) {
					const personType = personTypes[i]
					if(values[values.length-1]==personType.value){
						this.$set(personType,'checked',true)
						if(personType.value=='myself'){
							this.personInfo.aac002=store.state.hh_user.idcard;
							this.personInfo.aac003=store.state.hh_user.fullName;
							this.personInfo.aac004=store.state.hh_user.sex;
							this.personInfo.aac067=store.state.hh_user.cellphone;
						}else{
							this.personInfo.aac002='';
							this.personInfo.aac003='';
							this.personInfo.aac004='';
							this.personInfo.aac067='';
						}
					}else{
						this.$set(personType,'checked',false)
					}
				}
			},
			next(){
				let personInfo = this.personInfo;
				for(var i=0;i<this.personInfoRequired.length;i++){
					if(personInfo[this.personInfoRequired[i]]==''){
						this.modelContent='请填写页面上必填内容（*）'
						this.modelShow = true
						return;
					}
				}
				this.$Router.push({name: "workInjuryCaseInfo", params: {personInfo:this.personInfo}})
			}
		}
	}
</script>

<style>
.personType{
	line-height: 100rpx;
}
.personTypeCheckbox{
	margin-left: 40rpx;
	padding-left: 0rpx;
}
.personTypeLabel{
	margin-left: 30rpx;
}
</style>
